/**
 * 用户收藏站点组件
 */
import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import Icon from '../../public/icon';
import { px2dp } from 'rn-xiaobu-utils';
import flexStyle from '../../../configs/flex';
import fontsize from '../../../configs/fontsize';
import { iconDefaultColor } from '../../../configs/skin';
import AddressSaveInfo from '../models/AddressSaveInfo';

export default class AddressSave extends Component {
  static defaultProps = {
    leftIconName: 'shoucang1',
    id: '',
    alias: '',
    name: '',
    lat: '',
    lng: '',
    setting: () => {
    },
    onPress: () => {
    }
  }

  /**
   * 获取展示的名称
   * @returns {string}
   */
  defaultName = () => {
    if (this.props.name) {
      return this.props.name
    }
    if (this.props.sort === 1) {
      return '回家'
    }
    if (this.props.sort === 2) {
      return '上班'
    }
  }

  /**
   * 右侧设置按钮点击方法
   */
  setting = () => {
    this.props.setting(this.getAddressInfo())
  }

  /**
   * 获取当前组件的站点信息
   * @returns {{value: AddressSaveInfo, key: String}}
   */
  getAddressInfo = () => {
    return {
      key: this.props.index,
      value: new AddressSaveInfo(this.props.id, this.props.name, this.props.lat, this.props.lng, this.props.alias, this.props.sort)
    }
  }

  /**
   * 渲染右侧工具组件
   * @returns {*}
   */
  renderRight = () => {
    if (!this.props.lat && !this.props.lng) {
      // 没有设置地址时
      switch (this.props.sort) {
        case 1:// 当前为回家类型,展示不可点击文字（设置家的位置）
          return (
            <Text style={[fontsize.fontsize24, { color: '#999999' }]}>设置家的位置</Text>
          )
          break;
        case 2: // 当前为公司类型,展示不可点击文字（设置公司的位置）
          return (
            <Text style={[fontsize.fontsize24, { color: '#999999' }]}>设置公司的位置</Text>
          )
          break;
        default: // 默认的设置按钮
          return (
            <TouchableOpacity onPress={this.setting}>
              <Icon name={'more'} size={40}
                style={{ paddingLeft: px2dp(91) }} color={'#DDDDDD'}/>
            </TouchableOpacity>)
          break;
      }
    }
    // 设置了地址时，展示默认的设置按钮
    return (
      <TouchableOpacity onPress={this.setting}>
        <Icon name={'more'} size={40}
          style={{ paddingLeft: px2dp(91) }} color={'#DDDDDD'}/>
      </TouchableOpacity>
    )
  }

  render () {
    return (
      <TouchableOpacity style={[styles.container, {
        paddingTop: this.props.alias ? px2dp(16) : px2dp(30),
        paddingBottom: this.props.alias ? px2dp(16) : px2dp(30)
      }, flexStyle.flexH, flexStyle.flexVc]} onPress={()=>{
        this.props.onPress(this.getAddressInfo())
      }}>
        <Icon name={this.props.leftIconName} size={30}
          color={'#FAD137'} style={styles.leftIcon}/>
        <View style={{ flex: 1 }}>
          {this.props.alias && this.props.name
            ? <Text style={[fontsize.fontsize22, { color: iconDefaultColor }]} numberOfLines={1}>{this.props.alias}</Text> : null}
          <Text style={fontsize.fontsize28} numberOfLines={2}
            ellipsizeMode={'tail'}>{this.defaultName()}</Text>
        </View>
        {this.renderRight()}
      </TouchableOpacity>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    paddingLeft: px2dp(30),
    paddingRight: px2dp(30)
  },
  leftIcon: {
    marginRight: px2dp(46)
  }
});